*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url('../img/banshizhinan/banshi11.png');
    background-repeat: no-repeat;
    width: 1280px;
    height: 720px;

}
.heard{
    width: 300px;
    height: 80px;
    /*background: rebeccapurple;*/

    position: absolute;
    overflow: hidden;
    margin-top: 44px;
    margin-left: 900px;
    margin-right: 80px;
}
.time{
    width: 230px;
    height: 80px;
    float: left;
    color: #feffff;
    font-size: 30px;
}
.time1{
    margin-left: 145px;
}
.heard .weather{
    width: 63px;
    height: 63px;
    float: right;
    margin-top: 10px;
    background-image: url("../img/weather.png");
    background-repeat: no-repeat;
}

ul{
    list-style: none;
}

.function {
    width: 190px;
    height: 350px;
    /*background: aqua;*/
    margin-top: 134px;
    margin-left: 80px;
    float: left;
}
.function li{

    width: 188px;
    height: 65px;
    margin-top: 6px;
    text-align: center;
    line-height: 65px;
    color: #feffff;
    font-size: 28px;
}
.li-one{
    background-image: url("../img/banshizhinan/banshi2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.li-two{
    background-image: url("../img/banshizhinan/banshi2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.li-three{
    background-image: url("../img/banshizhinan/banshi2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.li-four{
    background-image: url("../img/banshizhinan/banshi2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.li-five{
    background-image: url("../img/banshizhinan/banshi2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.content-right{
    float: right;
    width: 903px;
    height: 550px;
    /*background: burlywood;*/
    margin-top: 139px;
    margin-left: 27px;
    margin-right: 80px;
    margin-bottom: 40px;
}
.article-top1{
    width:903px ;
    height: 260px;
    /*background: royalblue;*/
    overflow: hidden;
}
.article-detail1{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 10px;
    font-size: 24px;
    color: #feffff;
    /*background: red;*/

}
.content-right-detail1{
    width: 228px;
    height: 230px;
    float: left;
    margin-top: -10px;
    /*background: brown;*/
}
.right-detail1{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail1 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail2{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 15px;
    font-size: 24px;
    color: #feffff;

}

.content-right-detail2{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    margin-top: -10px;
    /*background: brown;*/
}
.right-detail2{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail2 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail2{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}

.content-right-detail3{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    margin-top: -10px;
    /*background: brown;*/
}
.right-detail3{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail3 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail3{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}

.content-right-detail4{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    margin-top: -10px;
    /*background: brown;*/
}

.right-detail4{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail4 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail4{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}
/*--------------------------------*/
.article-top2{
    width:903px ;
    height: 260px;
    margin-top: 15px;
    margin-bottom: 48px;
    /*background: royalblue;*/
    overflow: hidden;
}
.article-detail5{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}
.content-right-detail5{
    width: 228px;
    height: 230px;
    float: left;
    /*background: brown;*/
}

.right-detail5{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail5 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail6{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}
.content-right-detail6{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    /*background: brown;*/
}

.right-detail6{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail6 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail6{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}

.content-right-detail7{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    /*background: brown;*/
}
.right-detail7{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail7 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail7{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}

.content-right-detail8{
    width: 228px;
    height: 230px;
    float: left;
    margin-left: -3px;
    /*background: brown;*/
}
.right-detail8{
    width: 228px;
    height: 230px;
    background-image: url("../img/banshizhinan/unselected.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.right-detail8 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article-detail8{
    width: 228px;
    height: 46px;
    text-align: center;
    position: absolute;
    margin-top: 5px;
    font-size: 24px;
    color: #feffff;

}